<template>
	<view class="content">
		<Head title="消息" @back="back" icon="icon-arrow-left-bold"/>
        <div class="list" v-show="flag">
            <div @click="cut(ind)" v-for="(item,ind) in list" :key="ind"><p><span>{{item.title}}</span><span>></span></p></div>
        </div>
        <div class="lists" v-if="!flag">
            <div class="backOne">
                <span @click="backOne">返回</span>
            </div>
            <div class="pp">
                <div>
                    <div id="w">
                        <div v-for="(item) in list[ind].child" :key="item.id">
                            <div class="liu" v-if="item.name=='小刘'">
                                <p><span>{{item.name}}:</span></p>
                                <p><span>{{item.content}}</span></p>
                                <p><span>{{item.time}}</span></p>
                            </div>
                            <div class="wo" v-if="item.name=='我'">
                                <p><span>{{item.name}}:</span></p>
                                <p><span>{{item.content}}</span></p>
                                <p><span>{{item.time}}</span></p>
                            </div>
                            <div class="xi" v-if="item.name=='系统'">
                                <p><span>{{item.name}}:</span></p>
                                <p><span>{{item.content}}</span></p>
                                <p><span>{{item.time}}</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text">
                    <input v-model="value" type="text" placeholder="回复内容"/>
                    <span @click="send">发送</span>
                </div>
            </div>
        </div>
	</view>
</template>

<script>
import Head from '@/components/head/index'
import Events from '@/util/Events'
import Vue from 'vue'

	export default {
        components:{Head},
		data() {
			return {
                list:[
                    {title:'互动消息',
                    child:[
                        {name:"我",isRead:false,content:"你好",id:1,time:"2021/06/13 下午1:55:23"},
                        {name:"小刘",isRead:false,content:"我想看房",id:1,time:"2021/06/13 下午1:57:23"},
                        {name:"小刘",isRead:true,content:"我要看房",id:2,time:"2021/06/13 下午1:59:24"},
                        {name:"小刘",isRead:true,content:"我来看房",id:3,time:"2021/06/13 下午2:00:43"},
                        {name:"小刘",isRead:true,content:"我去看房",id:4,time:"2021/06/13 下午2:01:53"},
                        {name:"小刘",isRead:true,content:"我不去了",id:5,time:"2021/06/13 下午2:05:12"}
                    ]},
                    {title:'系统消息',
                    child:[
                        {name:"系统",isRead:false,content:"你的会员即将到期，请及时续费！",id:1,time:"2021/06/12 上午7:00:00"}
                    ]}
                ],
                ind:0,
                flag:true,
                value:''
			}
		},
		onLoad() {
            
		},
        mounted(){
            
        },
		methods: {
            back(){
                wx.navigateBack({
                    delta: 1
                })
            },
            backOne(){
                this.flag=true
            },
            cut(i){
                this.flag=false
                this.ind=i
                let newchild=this.list[i].child.map(item=>{
                    return {...item,isRead:false}
                })
                Vue.set(this.list[i],"child",newchild)
                Events.$emit("list",this.list)
                
            },
            send(){ 
                Vue.set(this.list[0].child,this.list[0].child.length,
                {name:"我",isRead:false,content:this.value,id:this.list[0].child.length,time:new Date().toLocaleString()})
                this.value='';
                wx.createSelectorQuery().select('#w').boundingClientRect(function(rect){
                   console.log(rect)
                    rect.width   // 节点的宽度
                    rect.bottom // 节点的高度
                    uni.pageScrollTo({
                        scrollTop: rect.height,
                        duration: 110,
                    })
                }).exec()
                
            }
		}
	}
</script>

<style scoped lang="scss">
	.list{
        background-color: #eee;
        height: 200rpx;
        div{
            background-color: #fff;
            p{
                height: 80rpx;
                width:80%;
                margin: 0 auto;
                line-height: 80rpx;
                margin-bottom: 20rpx;
                display: flex;
                justify-content: space-between;
            }
        }
    }
    .lists{
        display: flex;
        flex-direction: column;
        height:auto;
        >div:first-child{
            height: 80rpx;
            line-height:80rpx;
            position:fixed;
            top: 90rpx;
        }
        >div:nth-child(2){
            display: flex;
            flex-direction: column;
            height:auto;
            >div:first-child{
                background-color: #fff;
                height:auto;
                // overflow-y: auto;
                #w{
                    height: auto;
                }
                .liu{
                    p{
                        height: 80rpx;
                        width:80%;
                        margin: 0 auto;
                        line-height: 80rpx;
                        margin-bottom: 20rpx;
                        display: flex;
                        justify-content: space-between;
                    }
                    p:nth-child(3){
                        font-size:26rpx;
                        color:#888;
                        display: flex;
                        justify-content:flex-end;
                        height: 40rpx;
                        margin-top: -40rpx;
                    }
                    p:nth-child(2){
                        text-indent: 2em;
                    }
                }
                .wo{
                    p:first-child{
                        display: flex;
                        justify-content: flex-end;
                    }
                    p{
                        height: 80rpx;
                        width:80%;
                        margin: 0 auto;
                        line-height: 80rpx;
                        margin-bottom: 20rpx;
                        display: flex;
                        justify-content: space-between;
                    }
                    p:nth-child(3){
                        font-size:26rpx;
                        color:#888;
                        display: flex;
                        justify-content:flex-end;
                        height: 40rpx;
                        margin-top: -40rpx;
                        margin-bottom: 140rpx;
                    }
                    p:nth-child(2){
                        display: flex;
                        justify-content:flex-end;
                        text-indent: 2em;
                    }
                }
            }
        }
        .text{
            position:fixed;
            bottom: 0;
            left: 5%;
            height: 80rpx;
            border: 1px solid #aaa;
            border-radius: 80rpx;
            width:90%;
            display: flex;
            align-items: center;
            justify-content:center;
            background:#fff;
            input{
                width: 80%;
            }
        }
    }
    .backOne{
        margin-top: 30rpx;
    }
    .xi{
        margin-top:60rpx;
        background-color: #eee;
        padding:10rpx;
    }
    #w>div{
        .liu{
            background-color: #eee;
            padding:10rpx;
            margin-bottom: 20rpx;
        }
    }
</style>
